<template>
    <div id="comb_view">
        <div id="game_232" class="game_view">
            <div class="cont-col3-bd">
                <ul class="tab" style="height: 35px;">
                    <li class="tab_title02" id="game_lxlm">
                        <a href="javascript:void(0);" data-min="2" data-type="2" data-1="4.12|24425" data-2="3.32|24426"  @click="changeIndex(0)" :class="{'on':navIndex==0}">二连肖</a>
                        <a href="javascript:void(0);" data-min="3" data-type="2" data-1="11.12|24427" data-2="9.02|24428" @click="changeIndex(1)" :class="{'on':navIndex==1}">三连肖</a>
                        <a href="javascript:void(0);" data-min="4" data-type="2" data-1="31.2|24429" data-2="25.3|24430" @click="changeIndex(2)" :class="{'on':navIndex==2}">四连肖</a>
                        <a href="javascript:void(0);" data-min="5" data-type="2" data-1="98|24431" data-2="87|24432" @click="changeIndex(3)" :class="{'on':navIndex==3}">五连肖</a>
                        <a href="javascript:void(0);" data-min="2" data-type="1" data-1="3.18|24433" @click="changeIndex(4)" :class="{'on':navIndex==4}">二连尾</a>
                        <a href="javascript:void(0);" data-min="3" data-type="1" data-1="7.08|24434" @click="changeIndex(5)" :class="{'on':navIndex==5}">三连尾</a>
                        <a href="javascript:void(0);" data-min="4" data-type="1" data-1="15.8|24435" @click="changeIndex(6)" :class="{'on':navIndex==6}">四连尾</a>
                        <a href="javascript:void(0);" data-min="5" data-type="1" data-1="40|24436" @click="changeIndex(7)" :class="{'on':navIndex==7}">五连尾</a>
                    </li>
                </ul>
                <table class="u-table2" id="lxlm_2" v-if="navIndex == 0 || navIndex == 1 || navIndex == 2||navIndex == 3 ">
                    <thead>
                    <tr>
                        <th>生肖</th>
                        <th>号</th>
                        <th>赔率</th>
                        <th>勾选</th>
                        <th>生肖</th>
                        <th>号</th>
                        <th>赔率</th>
                        <th>勾选</th>
                    </tr>
                    </thead>
                    <tbody>
                    <TrItem :key="i" v-for="(row,i) in list[0]" :row="row" :bet-number="betNumber" ></TrItem>
                    </tbody>
                </table>
                <table class="u-table2" id="lxlm_1" v-if="navIndex == 4 || navIndex == 5 || navIndex == 6||navIndex == 7 ">
                    <thead>
                    <tr>
                        <th style="width: 4%;"> 生肖
                        </th>
                        <th style="width: 20%;"> 号
                        </th>
                        <th style="width: 8%;"> 赔率
                        </th>
                        <th style="width: 8%;"> 金额
                        </th>
                        <th style="width: 4%;"> 生肖
                        </th>
                        <th style="width: 20%;"> 号
                        </th>
                        <th style="width: 8%;"> 赔率
                        </th>
                        <th style="width: 8%;"> 金额
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <TrItem :key="i" v-for="(row,i) in list[1]" :row="row" :bet-number="betNumber" ></TrItem>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
    import TrItem from "../components/TrItem";
    import {mapState} from "vuex";
    export default {
        name: "LianXiaoLianWei",
        components:{
            TrItem
        },
        data(){
            return{
                navIndex:0,
                list: [
                    // 肖
                    [
                        [
                            {id:24842,name:'鼠',bet:9,
                                number:['01','13','25','37','49'],
                                selected:false,hovering:false,amount:''},
                            {id:24841,name:'马',bet:11.5,
                                number:['07','19','31','43'],
                                selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24843,name:'牛',bet:11.5,
                                number:['01','13','25','37','49'],
                                selected:false,hovering:false,amount:''},
                            {id:24844,name:'羊',bet:11.5,
                                number:['07','19','31','43'],
                                selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24843,name:'兔',bet:11.5,
                                number:['01','13','25','37','49'],
                                selected:false,hovering:false,amount:''},
                            {id:24844,name:'鸡',bet:11.5,
                                number:['07','19','31','43'],
                                selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24843,name:'虎',bet:2.7,
                                number:['01','13','25','37','49'],
                                selected:false,hovering:false,amount:''},
                            {id:24844,name:'猴',bet:2.7,
                                number:['07','19','31','43'],
                                selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24843,name:'龙',bet:2.7,
                                number:['01','13','25','37','49'],
                                selected:false,hovering:false,amount:''},
                            {id:24844,name:'狗',bet:2.7,
                                number:['07','19','31','43'],
                                selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24843,name:'蛇',bet:2.7,
                                number:['01','13','25','37','49'],
                                selected:false,hovering:false,amount:''},
                            {id:24844,name:'猪',bet:2.7,
                                number:['07','19','31','43'],
                                selected:false,hovering:false,amount:''},
                        ],
                    ],
                    // 尾
                    [
                        [
                            {id:24842,name:'0尾',bet:9,
                                number:['01','13','25','37','49'],
                                selected:false,hovering:false,amount:''},
                            {id:24841,name:'5尾',bet:11.5,
                                number:['07','19','31','43'],
                                selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24843,name:'1尾',bet:11.5,
                                number:['01','13','25','37','49'],
                                selected:false,hovering:false,amount:''},
                            {id:24844,name:'6尾',bet:11.5,
                                number:['07','19','31','43'],
                                selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24843,name:'2尾',bet:11.5,
                                number:['01','13','25','37','49'],
                                selected:false,hovering:false,amount:''},
                            {id:24844,name:'7尾',bet:11.5,
                                number:['07','19','31','43'],
                                selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24843,name:'3尾',bet:2.7,
                                number:['01','13','25','37','49'],
                                selected:false,hovering:false,amount:''},
                            {id:24844,name:'8尾',bet:2.7,
                                number:['07','19','31','43'],
                                selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24843,name:'4尾',bet:2.7,
                                number:['01','13','25','37','49'],
                                selected:false,hovering:false,amount:''},
                            {id:24844,name:'9尾',bet:2.7,
                                number:['07','19','31','43'],
                                selected:false,hovering:false,amount:''},
                        ]
                    ]
                ]
            }
        },
        computed:{
            ...mapState(['betNumber'])
        },
        watch:{
            betNumber(nVal){
                this.list.forEach((arr)=>{
                    arr.forEach((item)=>{
                        item.forEach((o)=>{
                            if (o.selected) {
                                o.amount = nVal
                            }
                        })
                    })
                })
                this.$forceUpdate()
            }
        },
        methods:{
            changeIndex(index){
                this.navIndex = index
                this.$nextTick(()=>{
                    this.bindEvent()
                })

            }
        }
    }
</script>

<style scoped>

</style>